<template>
  <!-- 商品详情 -->
  <view class="container">
    <!-- 轮播图 -->
    <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval"
      :duration="duration" :indicator-active-color="indicatorActiveColor">
      <block v-for="(item, index) in imgs" :key="index">
        <swiper-item>
          <image mode="aspectFit" :src="item" />
        </swiper-item>
      </block>
    </swiper>
    <!-- end  轮播图 -->
    <!-- 商品信息 -->
    <view class="prod-info">
      <view class="tit-wrap">
        <view class="prod-tit">
          {{ title }}
        </view>

        <view class="col" @tap="addOrCannelCollection">
          <image v-if="!isCollection" src="@/static/images/icon/prod-col.png" />
          <image v-if="isCollection" src="@/static/images/icon/prod-col-red.png" />
          收藏
        </view>
      </view>
      <view class="sales-p">
        {{ brief }}
      </view>
      <view class="prod-price">
        <text class="price">
          ￥
          <text class="price-num">
            {{ wxs.parsePrice(price)[0] }}
          </text>
          .{{ wxs.parsePrice(price)[1] }}
        </text>
      </view>
    </view>
    <!-- 商品详情介绍 -->
    <view class="prod-detail">
      <view>
        <rich-text :nodes="description" />
      </view>
    </view>
    <!-- end 商品详情 -->
    <!-- 底部按钮 -->
    <view class="cart-footer">
      <view class="btn icon" @tap="toHomePage">
        <image src="@/static/images/tabbar/homepage.png" />
        首页
      </view>
      <view class="btn icon" @tap="toReport">
        <image src="@/static/images/icon/report.png" />
        举报
      </view>
      <view class="btn icon" @tap="toCallSeller">
        <image src="@/static/images/icon/call.png" />
        联系卖家
      </view>


      <view class="btn buy" @tap="buyNow" v-if="status==1">
        <text>立即购买</text>
      </view>
      <view class="btn buy no" v-else-if="status==0">
        <text>已下架</text>
      </view>
      <view class="btn buy no" v-else>
        <text>已卖出</text>
      </view>
    </view>
    <!-- end 底部按钮 -->

  </view>
</template>

<script setup>
  const wxs = number()

  const indicatorDots = ref(true)
  const indicatorColor = ref('#f2f2f2')
  const indicatorActiveColor = ref('#eb2444')
  const autoplay = ref(true)
  const interval = ref(3000)
  const duration = ref(1000)
  const selectedProp = ref([])
  let goodsId = 0
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    goodsId = options.goodsId // 加载商品信息
    getProdInfo() // 加载商品数据
  })

  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    let a=uni.getStorageSync("Token")
    console.log(uni.getStorageSync("Token")!='');
    console.log(a);
    if (uni.getStorageSync("Token")!='') {
      getCollectionStatus() // 获取收藏状态
    }
  })

  const getCollectionStatus = () => {
    http.request({
        url: '/favorite/isFavorite',
        method: 'GET',
        data: {
          goodsId: goodsId
        }
      })
      .then((res) => {
        console.log(res);
        // 收藏状态
        // 1-已收藏，0-未收藏
        if (res.data == 1) {
          isCollection.value = true
        } else {
          isCollection.value = false
        }
      })
  }

  /**
   * 分享设置
   */
  onShareAppMessage(() => {
    return {
      title: title.value,
      path: '/pages/prod/prod?prodid=' + goodsId
    }
  })

  const isCollection = ref(false)
  /**
   * 添加或者取消收藏商品
   */
  const addOrCannelCollection = () => {

    uni.showLoading()
    http.request({
        url: '/favorite/addOrCancel/'+goodsId,
        method: 'POST',
      })
      .then(() => {
        isCollection.value = !isCollection.value
        uni.hideLoading()
      })
  }

  const skuList = ref([])
  const brief = ref('')
  const prodNum = ref(1)
  const pic = ref('')
  const imgs = ref([])
  const title = ref('')
  const price = ref(0)
  const description = ref('')
  const status = ref(0)
  /**
   * 获取商品信息
   */
  const getProdInfo = () => {
    uni.showLoading()
    http.request({
        url: '/goods/getGoods',
        method: 'GET',
        data: {
          id: goodsId // userType: 0
        }
      })
      .then(({
        data
      }) => {
        uni.hideLoading()
        if (!data) {
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
          return
        }
        console.log(goodsId + "商品详细数据");
        console.log(data);
        imgs.value = JSON.parse(data.pictureList)
        description.value = data.description
        price.value = data.price
        title.value = data.title
        goodsId = data.id
        brief.value = data.brief
        skuList.value = data.skuList
        pic.value = data.picture
        status.value = data.status
        uni.hideLoading()
      })
  }


  /**
   * 跳转到首页
   */
  const toHomePage = () => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }

  /**
   * 举报卖家
   */
  const toReport = () => {
    uni.navigateTo({
      url: '/pages/report/report?goodsId=' + goodsId
    })
  }

  /**
   * 联系卖家
   */
  const toCallSeller = () => {
    //获取对应手机号
    http.request({
      url: "/user/getPhone",
      method: "GET",
      data: {
        goodsId: goodsId
      }
    }).then((res) => {
      console.log("联系卖家");
      console.log(res);
      uni.makePhoneCall({
        phoneNumber: res.data
      })
    })
  }

  /**
   * 立即购买
   */
  const buyNow = () => {
    uni.navigateTo({
      url: '/pages/submit-order/submit-order?goodsId=' + goodsId
    })
  }
</script>

<style scoped lang="scss">
  @use './prod.scss';
</style>
